<template>
<!--实训项目的入口-->
    <header>
        <h1>
            选择实训项目
        </h1>
        <span @click="exit"  class="pointer">
            退出
        </span>
    </header>
    <!--主要部分-->
    <main>
        <div v-for="index in student.studentProject" :key="index.id">
            <h3>{{ index.name }}</h3>
            <p>指导教师：{{ index.teacher }}</p>
            <p>联系方式：{{ index.phone }}</p>
            <p>班级名称：{{ index.class }}</p>
            <p>实训状态：{{ index.training_schedule }}</p>
            <p>发布状态：{{ index.training_status }}</p>
            <n-button @click="router.push({name:'StudentTask',query:{projectId:index.id}})">
<!--                <router-link :to="{name:'StudentTask',query:{projectId:index.id}}">-->
                    马上实训
<!--                </router-link>-->
            </n-button>
        </div>
    </main>
</template>

<script setup>
import {useStudentStore} from '@/stores/student';
import {useUserStore} from "@/stores/user";
import router from "@/router";
import {SERIES} from "@/assets/server";
const student = useStudentStore()
const user = useUserStore()
student.updateStudentProject()
// 退出到登录页面
let exit = () => {
    // 清除token
    user.deleteToken()
    // 回到登录页面
    router.push({name: 'Login'})
}
watch(() => router.currentRoute.value.name, (pathName) => {
    //监视路由名称
    if (pathName === 'StudentIndex') {
        console.log("SERIES", SERIES)
        console.log("pathName", pathName)
        if (SERIES === "second") {
            router.push({name: "StudentIndexSecond"})
        } else if (SERIES === "first") {
            router.push({name: "StudentIndexFirst"})
        }
    }
}, {immediate: true, deep: true})
</script>

<style scoped lang="less">
header {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    height: 10vh;
    color: white;
    background-color: #29375b;
}

main {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    height: 90vh;
    box-sizing: border-box;
    padding: 3vh 3vw;

    > div {
        position: relative;
        width: 15vw;
        height: 45vh;
        box-sizing: border-box;
        margin-bottom: 3%;
        margin-left: 80px;
        padding: 2%;
        border: 1px solid;
        h3{
            margin-bottom: 20px;
        }
        p{
            margin-bottom: 20px;
        }
        .n-button{
            position: absolute;
            right: -50%;
            bottom: 10%;
            transform: translate(-57%,0);
            width: 93%;
            height: 40px;
        }
    }
}
</style>